<template>
	<view class='money-in-container dp-flex-col'>
		<form @submit='moneySubmit'>
			<view class='money'>
				<view class='money-title'>充值金额</view>
				<view class='money-list'>
					<view class='list' :class="currentTab == index?'listAct':''" v-for="(item,index) in moneyList" :data-money="item"
					 :data-index="index" @tap='tab'>
						{{item}}元
					</view>
					<navigator url="../../vip-card/vip-card" class='list' hover-class="none">
						<view class='list-recom'>推荐</view>
						<view>100元</view>
						<view class='list-member'>开通会员</view>
					</navigator>
				</view>
			</view>

			<view>
				<view class="level-desc">

					<view class='level-desc-red'>
						<view class='circle-red'></view>会员可直接拨打雇主电话，并享受平台专属客服全程协助与业务指导。
					</view>

				</view>
			</view>

			<!-- 支付 -->
			<view class="button-sp-area btn-pay-wrap">
				<button class="weui-btn btn-pay" form-type='submit'>微信支付(￥{{money}}元)</button>
			</view>

		</form>

	</view>
</template>

<script>
	/*引入基类文件*/
	import app from '@/App.vue';
	import event from '@/utils/event.js';
	/*引入接口文件*/
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js';
	/*页面进来加载函数*/
	export default {
		onLoad: function(options) {
			this.orderId = options.id || "";
			var arr = this.main_getGlobal();
			this.theArr=arr;
		},
		methods: {
			tab: function(e) {
				console.log('e的值', e);
				this.currentTab = e.currentTarget.dataset.index;
				this.money = e.currentTarget.dataset.money;
			},
			
			// 表单提交
			moneySubmit: function(e) {
				this.main_is_login(this.theArr);
				let postData = {};
				postData.money = this.money;
				//如果type为1，token登录直接充值
				this.recharge(arr.token, arr.type, postData);
			},
			// 转入
			recharge: function(token, type, postData) {
				uni.showLoading();
				gyzjModel.prototype.recharge(token, type, postData).then(data => {
					switch (data.code) {
						case 1:
							console.log('转入的data',data);
							let pay = data.data.pay;
							let orderNum = data.data.order.no;
							console.log('进来充值pay',pay);
							console.log('进来充值orderNum',orderNum);
							this.weChatPay(pay, orderNum);
							uni.hideLoading();
							break;
						default:
							uni.hideLoading();
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				})
			},
			// 微信支付
			weChatPay: function(payObj, orderNum) {
				uni.requestPayment({
					'timeStamp': payObj.timeStamp,
					'nonceStr': payObj.nonceStr,
					'package': payObj.package,
					'signType': payObj.signType,
					'paySign': payObj.paySign,
					'success': (res) => {
						this.checkWechatOrder(orderNum);
					},
					'fail': function(res) {
						uni.showToast({
							title: '订单支付失败 ' + res.errMsg,
							icon: 'none',
						})
					}
				})
			},

			// 查询订单支付情况
			checkWechatOrder: function(orderNum) {
				console.log('执行查询订单支付情况');
				let _this = this;
				uni.showLoading();
				gyzjModel.prototype.checkWechatOrder((data) => {
					switch (data.code) {
						case 1:
							// 发布事件
							event.emit('afterMoneyChange');
							app.globalData.userInfo.money = +app.globalData.userInfo.money + _this.data.money;
							uni.showModal({
								title: '转入成功!',
								content: '',
								showCancel: false,
								content: '你已转入成功！',
								confirmColor: '#F49321',
								success: function(res) {

									if (res.confirm) {
										event.emit('afterRelease');
										if (res.confirm) {
											if (_this.data.orderId) {
												/*关闭之前页面重定向*/
												uni.redirectTo({
													url: '/pages/order-lists/order-detail/order-detail?id=' + _this.data.orderId,
												})
											} else {
												uni.navigateBack({

												})
											}
										}

									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							})
							uni.hideLoading();
							break;
						default:
							uni.hideLoading();
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				}, (error) => {
					uni.hideLoading();
					console.log(error);
				}, orderNum)
			},

		},
		data() {
			return {
				orderId: "",
				money: 20,
				moneyList: [20, 40, 60],
				currentTab: '0',
				theArr:''
			}
		},
	}
</script>

<style>
	.weui-cell__hd {
		margin-right: 10px;
	}

	.money {
		background-color: #fff;
		margin-bottom: 20upx;
		padding: 20upx 20upx;
	}

	.money-title {
		font-weight: 600;
		margin-bottom: 20upx;
	}

	.money-list {
		display: flex;
	}

	.list {
		width: 23%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 120upx;
		background-color: #f5f5f5;
		margin-right: 2%;
		border-radius: 15upx;
		position: relative;
	}

	.list-recom {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60upx;
		height: 30upx;
		background-color: #47ce36;
		color: #fff;
		font-size: 18upx;
		border-radius: 15upx 0 0 0;
	}

	.list-member {
		color: #F94C48;
		font-size: 24upx;
		margin-bottom: -30upx;
	}

	.listAct {
		background-color: #F94C48;
		color: #fff;
	}

	.btn-pay-wrap {
		margin: 50upx 30upx 0;
	}

	.btn-pay {
		background-color: #F94C48;
		color: #fff;
		border-radius: 90upx;
	}

	.big-size {
		font-size: 60upx;
		color: #333;
		font-weight: 700;
	}

	.height-100 {
		height: 100%;
	}

	.level-desc {
		padding: 20upx;
		background: white;
		color: #666;
		font-size: 32upx;
	}

	.level-desc-box {
		margin-top: 30upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.level-desc-box>view {
		width: 50%;
	}

	.level-desc-box>view>text {
		margin-left: 10upx;
	}

	.bot-box {
		background: white;
		border-top: 2upx solid #EEE;
		padding-top: 20upx;
	}

	.bot-title-box {
		text-align: center;
		font-size: 34upx;
	}

	.bottom-tips {
		padding: 10upx 30upx;
		font-size: 28upx;
	}

	.bot-tips-item {
		margin-bottom: 10upx;
	}

	.bot-tips-item:last-of-type {
		margin-bottom: 0;
	}

	.level-desc-red {
		display: flex;
		align-items: center;
	}

	.circle-red {
		width: 15upx;
		height: 15upx;
		background-color: #F94C48;
		border-radius: 50%;
		margin-right: 15upx;
	}

	.level-desc-red:nth-child(1) .circle-red {
		width: 22upx;
		height: 15upx;
		background-color: #F94C48;
		border-radius: 50%;
		margin: -45upx 15upx 0upx 2upx;
	}
</style>
